<!-- 结果上火 -->
<template>
	<view>
		<view class="top"></view>
		<view class="body">
			<heads :text="texts" :imgUrl="imgUr"></heads>
			<view class="items">
				<view class="list_1 dis" v-for="(item,index) in list" :key="index">
					<view class="listLeft dis dis1 dis2">{{item.name}}</view>
					<view class="listRigth dis dis2">
						<view class="imgItem dis dis1 dis2" v-for="(i,index) in good" :key="index">
							<image src="../static/img/icon2.png" mode="aspectFit" class="imgs"></image>
							<image src="../static/img/icon1.png" mode="aspectFit" class="imgs" v-if="index<=showHow(item.chengduscore)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="kong">
			
		</view>
		<list :text1="text1" :text2='text2' :text3='text3' :text4='text4' pindex="pindex" :text7="text7" :text8="text8"></list>
		<!-- <botn></botn> -->
	</view>
</template>

<script>
	let app = getApp().globalData;
	import heads from '@/components/head.vue';
	import list from '@/components/consequence.vue';
	import botn from '@/components/botn.vue'
	export default {
		components: {
			heads,
			list,
			botn
		},
		data() {
			return {
				texts: '各部位上火程度',
				imgUr:'/static/stiati/icon_3.png',
				list: [],
				good:[{},{},{},{},{}],
				text1:'',
				text2:'',
				text3:'',
				text4:'',
				text7:'',
				text8:'',
				pindex:0
			};
		},
		created() {
			let that =this;
			console.log(app.resultData);
			this.list=app.resultData.zhibiaolist;
			let resultData = app.resultData;
			if(resultData.template.indexOf('{special}') !=-1){
				resultData.template = resultData.template.replace(/{special}/g,resultData.special)
			}
			let text1 =(resultData.template.split("{result}")[0]).replace(/\n/,'');
			console.log('text1',text1)
			let text2 = resultData.template.split("，{result}")[1];
			console.log('text2',text2)
			let text3 = text2.split("{zhengzhuang}")[0];
			console.log('text3',text3)
			let textx = text2.split("{zhengzhuang}")[1];
			let text4 = textx.split("调理建议")[0];
			console.log('text4',text4);
			this.text1=`${text1}${resultData.result}，${resultData.result}${text3}`;
			this.text2 = resultData.zhengzhuang;
			this.text3 =text4 
		},
		methods:{
			showHow(value){
				console.log('value',value)
				let indexTo=0
				if(value<=20){
					indexTo=0
				}else if(value<=40){
					indexTo=1
				}else if(value<=60){
					indexTo=2
				}else if(value<=80){
					indexTo=3
				}else if(value<=100){
					indexTo=4
				}else{
					indexTo=-1
				}
				return indexTo;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../common/css/flex.css";
	@import "../common/css/index.scss";
	
	.top {
		width: 750upx;
		height: 324upx;
		// background: linear-gradient(180deg, #3CC288 0%, #F8F8F8 100%);
		position: relative;
	}

	.body {
		width: 686upx;
		height: 471upx;
		background: #FFFFFF;
		border-radius: 24upx;
		position: absolute;
		top: 48upx;
		left: 32upx;
	}

	.items {
		width: 622upx;
		height: 350upx;
		// border: 1px solid red;
		margin: auto;

		.list_1 {
			width: 100%;
			height: 70upx;
			margin-bottom: 15upx;
			
			.listLeft {
				height: 100%;
				width: 88upx;
				// margin-right: 30upx;
				font-size: 28upx;
				font-family: $typeface;
				font-weight: 500;
				color: #666666;
			}

			.listRigth {
				width: 502upx;
				height: 100%;
				background-color: #FBFAFA;
				
				.imgItem {
					width: 20%;
					height: 44upx;
					position: relative;
					// margin-right: 25upx;
				}

				.imgs {
					width: 36upx;
					height: 44upx;
					position: absolute;
				}
			}
		}
	}
	.kong{
		width: 100%;
		height: 200upx;
	}
</style>
